<script setup>
import { computed } from 'vue'
import { Link, usePage } from '@inertiajs/vue3'

const props = defineProps({
  items: {
    type: Array,
    default: () => []
  }
})

const page = usePage()

const currentUrl = computed(() => page.url)

const isActive = (item) => {
  if (!item) {
    return false
  }

  if (typeof item.match === 'function') {
    return item.match(currentUrl.value)
  }

  if (Array.isArray(item.match) && item.match.length > 0) {
    return item.match.some((matcher) => currentUrl.value === matcher || currentUrl.value.startsWith(`${matcher}/`))
  }

  const href = item.href ?? '/'

  if (href === '/') {
    return currentUrl.value === '/'
  }

  return currentUrl.value === href || currentUrl.value.startsWith(`${href}/`)
}
</script>

<template>
  <nav>
    <ul class="flex rounded-full bg-white/90 px-3 text-sm font-medium text-zinc-600 shadow-lg ring-1 shadow-zinc-800/5 ring-zinc-900/5 backdrop-blur-sm dark:bg-zinc-800/90 dark:text-zinc-300 dark:ring-white/10">
      <li v-for="item in props.items" :key="item.href ?? item.name">
        <Link
          :href="item.href"
          :class="[
            'relative block px-3 py-2 transition',
            isActive(item)
              ? 'text-primary-600 dark:text-primary-400'
              : 'text-zinc-500 dark:text-zinc-400 hover:text-primary-600 dark:hover:text-primary-400'
          ]"
        >
          {{ item.name }}
          <span
            v-if="isActive(item)"
            class="absolute inset-x-1 -bottom-px h-px bg-gradient-to-r from-primary-500/0 via-primary-500/40 to-primary-500/0 dark:from-primary-400/0 dark:via-primary-400/40 dark:to-primary-400/0"
          />
        </Link>
      </li>
    </ul>
  </nav>
</template>
